<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.itypeArea{
display:inline-block;
width:150px;
}
.itypeArea input{margin-left:20px; }
</style>
<!-- 新增参数规格弹框 -->
<div id="aeparameter" style="width: 450px;">
	<form id="ParatplForm" class="form-horizontal" method="post"
		action="/category/o_parameter.do" style="width: 400px;height:300px;">
		<input type="hidden" name="id" value="[#if ProParatpl??]${ProParatpl.id!}[/#if]" />
		<input type="hidden" name="modelId" value="${modelId!}" />
		<div class="form-group">
			<label for="paramType" class="col-sm-4 control-label"><span
				style="color: red">*</span>选择类型： </label>
			<div class="col-sm-6">
				<select class="form-control" name="paramType" required id="paramType" onChange="changtype(this);" >
					<option [#if ProParatpl?? && ProParatpl.paramType==1]selected="selected" [/#if] value="1">产品参数</option>
					<option [#if ProParatpl?? && ProParatpl.paramType==2]selected="selected" [/#if] value="2">规格类型</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="search" class="col-sm-4 control-label"><span
				style="color: red">*</span>搜索项：</label>
			<div class="col-sm-6">
				<select class="form-control" name="search" required>
					<option [#if ProParatpl?? && ProParatpl.search==1]selected="selected" [/#if] value="1">是</option>
					<option [#if ProParatpl?? && ProParatpl.search==2]selected="selected" [/#if] value="2">否</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="mandatory" class="col-sm-4 control-label"><span
				style="color: red">*</span>是否必须：</label>
			<div class="col-sm-6">
				<select class="form-control" name="mandatory" required>
					<option [#if ProParatpl?? && ProParatpl.mandatory==1]selected="selected" [/#if] value="1">是</option>
					<option [#if ProParatpl?? && ProParatpl.mandatory==2]selected="selected" [/#if] value="2">否</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="ifdefine" class="col-sm-4 control-label">允许自定义参数：</label>
			<div class="col-sm-6" style="height: 34px; line-height: 34px">
				<input name="ifDefine" value="1" [#if ProParatpl?? && ProParatpl.ifDefine==1] checked="checked" [/#if]  type="checkbox"> 
				<span id="itypeArea" class="itypeArea" >
				<input value="1" name="itype" checked="checked"  type="radio">单选 
				<input value="2" name="itype" [#if ProParatpl?? && ProParatpl.itype?? && ProParatpl.itype==2] checked="checked" [/#if] type="radio">多选
                </span>
			</div>
		</div>
		<div class="form-group">
			<label for="name" class="col-sm-4 control-label"><span
				style="color: red">*</span>名称：</label>
			<div class="col-sm-6">
				<input type="text" id="proparatplname" name="name" class="form-control" maxlength="200" value="[#if ProParatpl??]${ProParatpl.name!}[/#if]"
					required placeholder="请输入名称">
			</div>
		</div>
		<div class="form-group" id="sampleArea" style="overflow-y: auto; height: 135px;">
			<label for="sample" class="col-sm-4 control-label">建议值：</label>
			<div class="col-sm-6">
				<input type="text" name="sample" class="form-control" required
					maxlength="50" placeholder="建议值">
			</div>
			<span onclick="plus();" class="glyphicon glyphicon-plus addsuggest"></span>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-4 col-sm-6">
				<button type="button" onclick="submtparameter();" class="btn btn-default">提交</button>
			</div>
		</div>
	</form>
</div>
<!-- 新增参数规格弹框END -->
<!-- 建议值输入框 -->
<div id="sample_input" style="display:none;">
	<div class="col-sm-offset-4 col-sm-6" style="padding-top: 15px;">
		<input type="text" name="sample" class="form-control" required maxlength="50" placeholder="建议值">
	</div>
	<span onclick="minus(this);" style="padding-top: 15px;" class="glyphicon glyphicon-minus addsuggest"></span>
</div>
<!-- 建议值输入框END -->

<script type="text/javascript">
$(function(){
	
	//规格类型的时候不显示
	var paramType=$("#paramType").val();
	var sample='[#if ProParatpl??]${ProParatpl.sample!}[/#if]';
	var samples=sample.split(",");//变为数组
	var samplessize=samples.length;
	if(paramType==1){
		$("#itypeArea").show().find("input").attr('disabled', false);
	}else{
		$("#itypeArea").hide().find("input").attr('disabled', true);
	}
	if(samplessize>3){
		$("#sampleArea").css("width","446px");
	}
	for(var j=1;j<samplessize;j++){
		$("#sampleArea").append($("#sample_input").html());
	}
	
	//循环设置值到框框
 	$("#sampleArea input").each(function(i){
		$(this).val(samples[i]);
	}) 
	
});
//改变类型的时候
function changtype(obj){
	var paramtype=$(obj).val();
	if(paramtype==1){
		$("#itypeArea").show().find("input").attr('disabled', false);
	}else{
		$("#itypeArea").hide().find("input").attr('disabled', true);
	}
}
//Ajax提交
function submtparameter(){
	var flag=true;
	$("#sampleArea input").each(function(i){
		var sampleval=$(this).val();
		if(sampleval.indexOf(',')>0){
			 artDialog.tips("建议值不要包含","号");
			 flag=false;
			 return;
		}
/* 		if($.trim(sampleval)==''){
			 artDialog.tips("建议值不能为空");
			 flag=false;
		} */
	});
	
	if($.trim($("#proparatplname").val())==''){
		 artDialog.tips("名称不能空");
		 flag=false;
		 return;
	}
	
	if(flag){
	art.dialog.post({
		url : "/category/o_parameter.do",
		data :$("#ParatplForm").serialize(),
		success : function(data){
			  if(data.success){
				  dialog.close();
			   }else{
				   art.dialog.alert(data.msg , function(){typerefresh();});
			   }
		}
	},"参数规格提交中....");
	}
}

function plus(){
	var samplessize=$("#sampleArea").find("input").size();
	if(samplessize>12){
		artDialog.tips("建议值添加过多");
		return false;
	}
	$("#sampleArea").append($("#sample_input").html());
	 arcss();
};

function minus(obj){
	$(obj).prev("div").remove();
	$(obj).remove();
	arcss();
}
//调整样式
function arcss(){
	var samplessize=$("#sampleArea").find("input").size();
	if(samplessize>3){
		$("#sampleArea").css("width","446px");
	}else{
		$("#sampleArea").css("width","430px");
	}
}
</script>
</head>
</html>